<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>我的视频</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/footer.css">
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/font_my/iconfont.css">
<link rel="stylesheet" href="__ROOT__ /AI_radar/js/qiniu/indexs.css">
<script type="text/javascript" src="__ROOT__ /AI_radar/js/token.js"></script>

<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #eee;
	}
	.video{
		
		background: #fff;
	}
	.head{
		width: calc(100% - 20px);
		padding: 0 10px;
		line-height: 35px;
		font-size: 18px;
		font-weight: bold;
	}
	.kong{
		height: 100px;
		/*line-height: 70px;*/
		text-align: center;
		padding-top: 20px;
	}
	.videoimg{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: auto;
		text-align: center;
		line-height: 50px;
		color: #fff;
		background: #ddd;
	}

	.videoP{
		text-align: center;
		line-height: 30px;
		margin: 0;
	}
	/*.file-input {
	    display: inline-block;
	    box-sizing: border-box;
	    width: 16px;
	    width: 80px;
	    height: 30px;
	    opacity: 0;
	    cursor: pointer;
	  }*/
/*	  .select-button {
	    color: #fff;
	    position: absolute;
	    width: 80px;
	    height: 30px;
	    text-align: center;
	    background: #4f81d4;
	    border: none;
		}

	  #select-button{
	    margin:0;
	    padding: 0;
	  }*/
	  #myVideo{
      width: 90%;
      height: 10rem;
      margin-left: 5%;
    }
    .videoTS{
    	/*line-height: 50px;*/
    	padding: 15px 0;
    	color:#555555;
    }
    .videos{
    	width: calc(100% - 20px);
    	padding: 10px;
    	margin: auto;
    	text-align: center;
    	border-top: 5px solid #eee;
    }
    .videoSh{
    	width: 90px;
    	background: #4f81d4;
    	color: #fff;
    	line-height: 35px;
    	text-align: center;
    	margin:auto;
    }
    .videoCh{
    	margin-bottom: 2rem;
    }
    .sah{
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	background: rgba(0,0,0,0.7);
    	display: none;
    	z-index: 9999;
    }
    .datailTopL{
		width: 120px;
		margin: auto;
	}
	.sahZ{
		margin-top: 50%;
	}
	.sahSpan{
		width: 80%;
		margin:auto;
		padding: 2rem 0;
		text-align: center;
		color: red;
		font-size: 15px;
	}




</style>

</head>
<body>
	{include file="public/wx_share" /}
	<div class="video">
		<div class="head">我的视频</div>
		<video id="myVideo" poster="" controls></video>
		<div class="videos">
			<div class="videoTS">您还没有视频，马上添加吧</div>
			<div class="videoCh">
				<div class="mainContainer">
				    <div class="nav-box" >
				      <div id="process" class="tab-content">
				        <div class="tab-pane fade in active" id="h5">
				          <div id="fsUploadProgress"></div>
				          <div class="chuan">
					          <form method="post" enctype="multipart/form-data" id="form" action="upload">
					            <div id="box2" style="border:1px solid #4f81d4">
					              <button class="select-button select-button" sid=''><i class='iconfont icon-jiahao1'></i></button>
					              <input class="file-input" type="file" id="select2" sid='' class="select2" multiple="multiple" accept="video/*"/>
					            </div>
					          </form>
					          <!-- <div class="uploading uploading" id="uploading">开始上传</div> -->
				          </div>
				        </div>
				      </div>
				    </div>
				</div>
			</div>
			<div class="videoSh">立即上传</div>
		</div>
	</div>
	<div class="sah">
		<div class="sahZ">
			<div class="datailTopL">
				<canvas id="can1" width="120" height="120"></canvas>
			</div>
			<div class="sahSpan">正在上传视频，请不要刷新和退出页面，否则将上传失败</div>
		</div>
	</div>
	
<script src='__ROOT__ /AI_radar/js/jquery.js'></script>
<script type="text/javascript" src='__ROOT__ /AI_radar/js/qiniu/qiniu.min.js'></script>
<script type="text/javascript" src='__ROOT__ /AI_radar/js/qiniu/md5.js'></script>
<script type="text/javascript" src='__ROOT__ /AI_radar/js/qiniu/widget.js'></script>
<script type="text/javascript" src='__ROOT__ /AI_radar/js/qiniu/common.js'></script>
<script type="text/javascript" src='__ROOT__ /AI_radar/js/qiniu/ui.js'></script>

<script type="text/javascript">
	var video = document.querySelector("video")
	var videoID;

	$.ajax({
	      url:window.urls.url + "/my/video/info",
	      type:"POST",
	      contentType: "application/json",
	      dataType:"json",
	      data:JSON.stringify({
	        token:window.tokens.token_boss,
	      }),
	      success:function(res){
	        console.log(res)
	        console.log(res.data.url)
	        if(res.data){
	        	$(".videoTS").html("点击上面播放按钮即可查看,点击下方添加框即可修改视频")
		         video.src = res.data.url
		         video.poster = res.data.url + "?vframe/jpg/offset/1"
	        	$("#myVideo").css("display","block")
		         videoID = res.data.id
	        }else{
	        	$("#myVideo").css("display","none")
	        }
	        
	      },
	      error:function(res){
	        console.log(res)
	      }
  	})

	var num = 1
	var videoId
	$(".videoDel").click(function(){
		console.log(videoId)
		delQiniuY(videoId,'video')
	})
	var audioId;
//图片上传
  var delsQi = [];
  var arrsname = [];
  var arr = []//base64

    $.ajax({
      url: window.qiniuUrl.url + "/token/file/video",
      datauser:"json",
      beforeSend: function(request) {
          request.setRequestHeader("token",window.tokens.token_boss);
      },
      success: function(res){
        console.log(res)
        var token = res.token;
        var domain = res.url;
        var config = {
          useCdnDomain: true,
          disableStatisticsReport: true,
          retryCount: 6,
          region: qiniu.region.z2
        };
        var putExtra = {
          fname: "",
          params: {},
          mimeType: null
        };
        function nam(){
          console.log(this)
        }
        uploadWithSDK(token, putExtra, config, domain,'video');
      }
    })
function uploadWithSDK(token, putExtra, config, domain, typename) {
  // 切换tab后进行一些css操作
  var fileArr = []//file
  var timesKey = []//时间戳
  var boards = []
   

    $("#select2").unbind("change").bind("change",function(){

      var types =''
      var file = this.files[0]
      console.log(file);
      var url = URL.createObjectURL(file);
      $(".videoTS").html("添加视频成功，点击“立即上传”即可上传视频")
      console.log(url)
      // alert(url)
	  $("#myVideo").css("display","block")

      video.src = url
        // this.video_url= url;

     //    const reader = new FileReader();
	    // reader.onload = (evt) => {
	    //   const myVideo = document.querySelector("#myVideo");
	    //   console.log(evt.target.result)
	    //   myVideo.src = evt.target.result;
	    // };
	    // reader.readAsDataURL(file);
        var finishedAttr = [];
        var compareChunks = [];
        var observable;
          var timestamp;
        if (file) {
          var key = file.name;
          console.log(key)
	            fileArr.push(file)
	            arr.push(key)
	            arrsname.push(key)
          var fr = new FileReader();
          fr.readAsDataURL(file);
            
            $(".videoSh").click(function(){
            	$(".sah").css("display","block")
        		console.log(file)
        
                // var record = recorder.getBlob();
                console.log(file)
                putExtra.params["x:name"] = "audio"
                // board.start = true;
              // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
                var error = function(err) {

                  console.log(err);
                  alert("上传出错")
                  $(".sah").css("display","none")
                  window.history.go(-1)
                };
                var complete = function(res) {
                  console.log(videoID)
                	if(videoID){
                		delQiniuY(videoID,"video")
                	}
                  console.log(res)
                 
                };

                var next = function(response) {
                    var chunks = response.chunks||[];
			        var total = response.total;
			        var numsr = parseInt(total.percent)
			        canv(numsr)
			        console.log(numsr)
			        console.log(total,chunks)
			        if(numsr == 100){
            			$(".sah").css("display","none")
            			$(".videoTS").html("上传成功")
            			alert("上传成功")
            			window.history.go(-1)
            			// window.location.href= window.urls.url + `/my/compile?corpid=${localStorage.getItem("CRM_corpId")}`
			        }
			        // 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过
			        // for (var i = 0; i < chunks.length; i++) {
			        //   if (chunks[i].percent === 0 || finishedAttr[i]){
			        //     continue;
			        //   }
			        //   if (compareChunks[i].percent === chunks[i].percent){
			        //     continue;
			        //   }
			        //   if (chunks[i].percent === 100){
			        //     finishedAttr[i] = true;
			        //   }
			        // }
			        // compareChunks = chunks;
                };

                var subObject = { 
                  next: next,
                  error: error,
                  complete: complete
                };
                var subscription;
                var names = file.name
                var rank1 = names.indexOf('.');
                var rank3 = rank1;
                var rank = names.slice(rank3);
                var ranks = token.slice(10,25);
                var timetamp = Date.parse(new Date()) 
                var key = typename+"/"+timetamp+ranks+rank
                console.log(timetamp)
                console.log(key)

             // 调用sdk上传接口获得相应的observable，控制上传和暂停
                observable = qiniu.upload(file, key, token, putExtra, config);
                subscription = observable.subscribe(subObject);
    	})
    }
  })
}

   


  function delQiniuY(dele,typename){
  	console.log(dele,typename)
      $.ajax({
        url: window.qiniuUrl.url + "/file/delete?img_id="+dele+"&type="+typename,
        type:"delete",
        contentType:"application/json",
        dataType:"json",
        beforeSend: function(request) {
            request.setRequestHeader("token",window.tokens.token_boss);
        },
        success: function(res){
          console.log(res)
         
        },
        error: function(res){
          console.log(res)
        },
      })
  }
	function canv(deg){
		var canv=document.getElementById("can1");
		var ctx=canv.getContext("2d");
		var degs = 360/100*deg-90
		var degx = deg + "%"
	
		ctx.clearRect(0,0,120,120)
		var x = (2*Math.PI/360)*-90
		var y = (2*Math.PI/360)*degs

		ctx.beginPath();
		ctx.lineWidth = 5;
		ctx.strokeStyle = "red"
		ctx.arc(60,60,50,x,y);
		ctx.stroke();
		ctx.closePath();
		ctx.font="20px Arial";
		ctx.fillStyle="red";
		ctx.textAlign="center";
		ctx.fillText(degx,60,65);
		
	}




</script>
</body>
</html>